import React from 'react';
import classNames from 'classnames';
import { Button } from 'antd';
import _ from 'lodash';
import type { CSSProperties, ReactNode } from 'react';
import type { Argument } from 'classnames';
import type { ButtonType } from 'antd/lib/button';
import './index.less';

const TjHeader: React.FC<ITjHeaderProps> = (props) => {
  function buildRight() {
    let node: ReactNode = null;
    if (props.right) {
      if (_.isArray(props.right)) {
        const arr = props.right as IActionsType[];
        node = (
          <div className="right-btns">
            {arr.length > 0 &&
              arr.map((v) => {
                const type = v.type ? v.type : 'link';
                const disabled = v.disabled ? v.disabled : false;
                return (
                  <Button
                    key={v.key}
                    type={type}
                    icon={v.icon}
                    disabled={disabled}
                    onClick={() => v.onClick && v.onClick()}
                  >
                    {v.name}
                  </Button>
                );
              })}
          </div>
        );
      } else {
        node = props.right;
      }
    }
    return node;
  }

  return (
    <div style={props.style} className={classNames('tj-header', props.className)}>
      <div className="left">{props.left}</div>
      <div className="rigth">{buildRight()}</div>
    </div>
  );
};

export interface IActionsType {
  /**
   * 按钮名称
   */
  name: string;
  /**
   * 按钮key
   */
  key: string;
  /**
   * 图标
   */
  icon?: ReactNode;
  /**
   *
   * 按钮点击事件
   */
  onClick?: () => void;
  /**
   * 按钮类型默认为 `link`
   */
  type: ButtonType;
  /**
   * 是否禁用
   */
  disabled?: boolean;
}

export interface ITjHeaderProps {
  /**
   * 支持传入行内样式
   */
  style?: CSSProperties;
  /**
   * class
   * 不管传没传，都会有一个 `tj-header` 的 className
   */
  className?: Argument;
  /**
   *  左边内容
   */
  left?: ReactNode;
  /**
   *  右边内容
   */
  right?: ReactNode | IActionsType[];
}

export { TjHeader };
